You can use `useAuthenticator` composable to access functions that lets you trigger transitions to the authenticator. Please see [Full API](#full-api) to see all supported transition functions. Any invalid transitions (e.g. `signUp` directly to `authenticated`) will be ignored.

```html{1,5-8}
<script setup>
  import { Authenticator, useAuthenticator } from '@aws-amplify/ui-vue';
  const auth = useAuthenticator();
</script>

<template>
  <authenticator></authenticator>
  <template v-if="auth.route === 'authenticated'">
    <h1>Hello {{ auth.user?.username }}!</h1>
    <button @click="auth.signOut">Sign out</button>
  </template>
</template>
```